import { useConfigStore } from '@/utils/store/configStore'
import { Button, Input, Switch } from '@arco-design/web-react'
import GroupList from './views/GroupList'
import SearchResult from './views/GroupList/SearchResult'
import { openHomeTab } from '@/utils/toHomeTab'

function App() {
    // 插件配置
    const [config, setConfig] = useConfigStore({})
    // 搜索关键词
    const [searchKeyword, setSearchKeyword] = useState('')

    const handleOpenHome = () => {
        openHomeTab()
    }

    return (
        <>
            <div className='flex flex-col container w-[600px] min-h-[200px] h-[400px] overflow-hidden'>
                <div className='flex justify-between items-center border-b-1 border-b-solid border-gray-200 p-1'>
                    <div className='flex items-center shrink-0'>
                        Mock Response
                        <Switch
                            className='ml-2'
                            checked={config?.enabled}
                            onChange={(v) =>
                                setConfig({ ...config, enabled: v })
                            }
                        />
                    </div>
                    <Input.Search
                        className='w-[200px] has-focus:w-[300px] transition-all'
                        placeholder='搜索'
                        allowClear
                        value={searchKeyword}
                        onChange={(v) => setSearchKeyword(v)}
                    />
                    <Button type='outline' onClick={handleOpenHome}>
                        管理面板
                    </Button>
                </div>
                <div className='root-group-list flex-1 overflow-hidden'>
                    {!!searchKeyword ? (
                        <SearchResult keyword={searchKeyword} />
                    ) : (
                        <GroupList />
                    )}
                </div>
            </div>
        </>
    )
}

export default App
